<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i>分类 </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-button type="primary" class="add_btn" @click="addCategory">新增分类</el-button>
			<div class="name_wrapper">
				<el-table :data="classifyList" style="width: 100%; margin-bottom: 20px" row-key="id" border :tree-props="{ children: '_child' }" @expand-change="sliderChange">
					<el-table-column label="课程名称" width="300">
						<template slot-scope="{row}">
							<div class="name">								
								<img :src="row.cover" @error="tabErrorPicture(row.id,'classifyList')" alt="" class="info-image" v-if="row._child" />
								<img :src="row.cover" @error="tabErrorChildPicture(row)" alt="" class="info-image" v-else />
								<span>{{ row.title }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="{row}">
							<div :class="row.status > 0 ? 'on' : 'off'">{{ row.status == 0 ? '禁用' : '启用' }}</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="340" fixed="right">
						<template slot-scope="{ row }">
							<div v-if="row._child">
								<el-button @click="addChildCategory(row.title, row.id)" type="primary" size="mini">添加子分类</el-button>
								<el-button @click="parentCategoryEdit(row.id, row.title, row.sort, row.status,row.cover)" type="success" size="mini">编辑</el-button>
								<el-button @click="disable(row.id, row.status)" type="warning" size="mini">{{ row.status == 0 ? '启用' : '禁用' }}</el-button>
								<el-button @click="deleteRow(row.id)" type="danger" size="mini">删除</el-button>
							</div>
							<div v-else>
								<el-button @click="childCategoryEdit(row.id, row.title, row.title, row.sort, row.status,row.cover)" type="success" size="mini">编辑</el-button>
								<el-button @click="disable(row.id, row.status)" type="warning" size="mini">{{ row.status == 0 ? '启用' : '禁用' }}</el-button>
								<el-button @click="deleteRow(row.id)" type="danger" size="mini">删除</el-button>
							</div>								
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 新增/编辑弹出框 -->
		<el-dialog :title="dialogTitle" :visible.sync="addOrEditVisible" width="540px" class="sorticon">
			<el-form ref="form" :rules="rules" :model="form" label-width="100px">
				<el-form-item label="上级分类" v-if="form.showParentName">
					<el-input v-model="form.parentName" :disabled="form.orEdit"></el-input>
				</el-form-item>
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
				</el-form-item>
				<el-form-item label="分类图片">
					<div class="avatar-uploader" @click="updateuploadimg">
						<img v-if="form.cover" :src="form.cover" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<el-tag>建议尺寸：300*300px，等比例正方形图片，支持jpg、png格式。</el-tag>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model.number="form.sort" placeholder="数字越小越靠前" type="number"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="form.status">
						<el-radio :label="1" :key="1">启用</el-radio>
						<el-radio :label="0" :key="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
	</div>
</template>

<script>
import {
	classifyListData,
	addClassifyData,
	editClassifyData,
	delClassifyData
} from '../../api/index';
import uploadimage from '@/components/common/uploadimage.vue';
export default {
	components: {
		uploadimage
	},
	data() {
		return {
			classifyList: [],
			addOrEditVisible: false,
			id: '',
			dialogTitle: '',
			form: {
				showParentName: false,
				parentName: '',
				orEdit: true,
				name: '',
				sort: 0,
				status: 1,
				cover: ''
			},
			istatus: 1,
			rules: {
				name: [
					{ required: true, message: '请输入分类名称', trigger: 'blur' },
					{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
				],
				sort: [
					{ required: true, message: '请输入排序数字', trigger: 'blur' },
					{ type: 'number', message: '必须为数字' }
				]
			},
			errorProduct: require('@/assets/img/noProduct.jpg'), 
		};
	},
	created() {
		this.getData();
	},
	methods: {
		tabErrorPicture(id,data){    // 表格图文封面默认展示图
            let i = this[data].findIndex(v => v.id == id);
			this[data][i].cover = this.errorProduct;
        },
		tabErrorChildPicture(v){    // 表格图文封面子级默认展示图
			v.cover = this.errorProduct;
		},
		sliderChange(row,bool){	// 表格展开、收起
			let i = this.classifyList.findIndex(v => v.id == row.id);
			bool && this.classifyList[i]._child.forEach(v => this.tabErrorChildPicture(v));
		},
		getData() {
			classifyListData().then((res) => {
				this.classifyList = res.data.list;
			});
		},
		addCategory() {
			this.addOrEditVisible = true;
			this.form = {
				name: '',
				cover: '',
				sort: 0,
				status: 1
			};
			this.id = 0;
			this.dialogTitle = '新增';
		},
		parentCategoryEdit(id, title, sort, status, cover) {
			this.addOrEditVisible = true;
			this.form.showParentName = false;
			this.id = id;
			this.form.name = title;
			this.form.sort = sort;
			this.form.status = status;
			this.form.orEdit = false;
			this.form.cover = cover;
			this.dialogTitle = '编辑';
		},
		childCategoryEdit(id, Ptitle, Stitle, sort, status, cover) {

			console.log('child_:', id)


			this.addOrEditVisible = true;
			this.form.showParentName = true;
			this.id = id;
			this.form.parentName = Ptitle;
			this.form.name = Stitle;
			this.form.sort = sort;
			this.form.status = status;
			this.form.orEdit = true;
			this.form.cover = cover;
			this.dialogTitle = '编辑';
		},
		addChildCategory(title, id, index) {
			this.form = {
				name: '',
				cover: '',
				sort: 0,
				status: 1
			};
			this.addOrEditVisible = true;
			this.form.showParentName = true;
			this.form.parentName = title;
			this.id = id;
			this.form.orEdit = true;
			this.dialogTitle = '新增';
		},
		//禁用
		disable(id, status) {
			this.$confirm(`确定${status == 0 ? '启用' : '禁用'}吗！`, '提示', {
				type: 'warning'
			}).then(() => {
				editClassifyData({
					id: id,
					status: status == 0 ? 1 : 0
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success('成功');
						this.getData();
						//location.reload();
					}
				});
			});
		},
		//删除
		deleteRow(id) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			}).then(() => {
				delClassifyData({
					id: id
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success('删除成功');
						this.getData();
						//location.reload();
					}
				});
			});
		},
		cancel() {
			this.addOrEditVisible = false;
		},
		save(formName) {

			if (this.dialogTitle == '新增') {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addClassifyData({
							pid: this.id,
							title: this.form.name,
							sort: this.form.sort,
							status: this.form.status,
							cover: this.form.cover
						}).then((res) => {
							console.log(res);
							if (res.code == 1) {
								this.addOrEditVisible = false;
								this.getData();
								//location.reload();
							}
						});
					}else{
						return false
					}
				})
			} else {
				editClassifyData({
					id: this.id,
					title: this.form.name,
					sort: this.form.sort,
					status: this.form.status,
					cover: this.form.cover
				}).then((res) => {
					if (res.code == 1) {
						this.addOrEditVisible = false;
						this.getData();
						//location.reload();
					}
				});
			}
		}, childByImageValue: function (childValue) {
			this.form.cover = childValue;
		}, updateuploadimg() { //显示上传组件
			this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/components/common/css/common.css';
.container{
	.add_btn{
		margin: 0 0 15px;
	}
	.name_wrapper{
		.el-table{	
			::v-deep .cell{
				display: flex;
				.name{
					display: flex;
					align-items: center;				
					img{
						width: 30px;
						height: 30px;
						margin: 0 10px 0 0;
					}
				}
				.on{
					color: #67C23A;
				}
				.off{
					color: #F56C6C;
				}
			}	
			
		}
	}
}
.sorticon{
	.avatar-uploader{
		img{
			display: block;
			height: 200px;
			margin: 0;
		}
		.el-icon-plus{
			font-size: 28px;
			color: #ccc;
			padding: 30px;			
			// border-radius: 6px;			
			cursor: pointer;
			&:hover{
				border-color: #409EFF;
			}
		}
	}
}
</style>
